    <template>
     <!-- 这是有顶部通栏，头部，有底部，中间内容是要变化的，布局容器 -->
    <app-topnav/> 
    <!-- 头部组件 -->
    <AppHeader/>
    <AppHeaderSticky />
    <main class="app-body">
        <!-- 二级路由 -->
        <router-view></router-view>
    </main>
    <!-- 底部组件 -->
    <AppFooter/>
</template>
<script>
import AppTopnav from '@/components/app-topnav.vue'
import AppHeader from "@/components/app-header.vue";
import AppFooter from "@/components/app-footer.vue";
import AppHeaderSticky from "@/components/app-header-sticky.vue";
import { onMounted } from "vue";
import { useStore } from "vuex";
export default {
 name: 'XtxLayout',
 components: {AppTopnav, AppHeader,AppFooter,AppHeaderSticky}, 
   setup() {
    const store = useStore();
    onMounted(() => {
      // 调用分类的actions，一次就好（app-header-nav会复用，多次调用）
      store.dispatch("category/getList");
    });
  },
}
</script>